/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable no-undef */
/* eslint-disable no-restricted-globals */
/* eslint-disable no-unused-expressions */
import { Button, NavBar, Form, Input, List, Toast } from 'antd-mobile'
import {useDispatch} from 'react-redux'
import {userLogin,getCode} from '@/store/actions/login'
import { useHistory } from 'react-router'
import { useRef } from 'react'
import { loginInfo } from '@/store/types/data'
import styles from './index.module.scss'
import { InputRef } from 'antd-mobile/es/components/input'
import { AxiosError } from 'axios'
const Login = () => {
  const history=useHistory()
  // eslint-disable-next-line no-undef
   const dispatch=useDispatch()
   // 手机号的ref
   const refMobile=useRef<InputRef>(null) 
   const [form] = Form.useForm() 
  // 用户登录功能
  const onFinish=async(values:loginInfo)=>{
    try {
          await dispatch(userLogin(values)) 

          // 成功的提示
          Toast.show({
            content: '登录成功',
            afterClose: () => {
              // 跳转到Home页
              history.push('/home')
            },
          })

    }catch(err) {
      // console.dir(e);
      const error = err as AxiosError<{ message: string }>
      // 失败的提示
      Toast.show({
        content: error.response?.data.message
      })
    }
    
  }
  // 发送验证码
  const setCode=async ()=>{
    // 1.验证表单元素--手机号格式
    if(form.getFieldError('mobile').length>0) {
      // 让手机号所在文本框自动获取焦点
      refMobile.current!.focus()
    }
    // 2.拿到手机号
    const mobile=form.getFieldValue('mobile')
    console.log('mobile',mobile);
    // 发送验证码
    try {
      await dispatch(getCode(mobile))
      Toast.show({
        content:'验证码已发送'
      })
    }catch(err) {
      console.dir(err);
      const error = err as AxiosError<{ message: string }>
      Toast.show({
        content:error.response?.data.message
      })
    }

  }
    // 
  return ( 
  
    <div className={styles.root}>
      <NavBar></NavBar>
      <div className="login-form">
        <h2 className="title">账号登录</h2>
        <Form 
        initialValues={{mobile:'13911111111',code:'246810'}} 
        onFinish={onFinish}
        form={form}
        >
          <Form.Item className="login-item" name="mobile" rules={[
             {
               required:true,
               message:'手机号必填'
             },{
                pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message:'手机号格式不对'
             }
          ]} 
          >
            <Input placeholder="请输入手机号" ref={refMobile}/>
          </Form.Item>
          <List.Item
            className="login-code-extra"
            extra={<span className="code-extra" onClick={setCode}>发送验证码</span>
          }
          >
            <Form.Item name="code" className="login-item" rules={[
             {
               required:true,
               message:'验证码必填'
             },{
                pattern:/^\d{6}$/,
                message:'验证码格式不对'
             }
          ]

          }>
              <Input placeholder="请输入验证码" autoComplete="off" />
            </Form.Item>
          </List.Item>

          <Form.Item noStyle>
            <Button
              block
              type="submit"
              color="primary"
              className="login-submit"
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
    )
  }
 

export default Login